<template>
  <div class="container">
    <div class="row">
      <div class="col-12 pt-3">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th scope="col">编号</th>
              <th scope="col">科目</th>
              <th scope="col">成绩</th>
              <th scope="col">考试时间</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <!-- 循环渲染学科成绩 -->
          <tbody>
            <tr v-for="item in list">
              <th scope="row">{{ item.id }}</th>
              <td>{{ item.subject }}</td>
              <!-- /* 不及格显示红色 */ -->
              <td :class="{ 'not-pass': item.score < 60 }">{{ item.score }}</td>
              <td>{{ item.time.toLocaleString() }}</td>
              <td>
                <button type="button" class="btn btn-link" @click="del(item.id)">删除</button>
              </td>
            </tr>
            <tr class="bg-light">
              <th scope="row">统计</th>
              <td colspan="2">总分：{{ getTotal() }}</td>
              <td colspan="2">平均分：{{ getTotal() / list.length }}</td>
            </tr>
          </tbody>
          <tfoot style="display: none">
            <tr>
              <td class="text-center" colspan="5">暂无数据</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <form class="row align-items-center" @submit.prevent="add">
      <div class="col-3">
        <input type="text" class="form-control" placeholder="请输入科目" v-model="subject" />
      </div>

      <div class="col-3">
        <input type="text" class="form-control" placeholder="请输入分数" v-model.number="score" />
      </div>

      <div class="col-3">
        <button type="submit" class="btn btn-primary">添加</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: [
        {
          id: 100,
          subject: "语文",
          score: 99,
          time: new Date("2010-08-12"),
        },
        {
          id: 101,
          subject: "数学",
          score: 34,
          time: new Date("2020-09-01"),
        },
        {
          id: 102,
          subject: "英语",
          score: 25,
          time: new Date("2018-11-22"),
        },
        {
          id: 103,
          subject: "体育",
          score: 100,
          time: new Date("2020-12-12"),
        },
      ],
      subject: '',
      score: 0
    };
  },

  methods: {
    getTotal() {
      /** 这里reduce必须传递初始值，因为item是一个对象，reduce默认自动读取第一个item的值 */
      let res = this.list.reduce((sum, item) => {
        return sum += item.score
      }, 0)
      console.log(res);
      return res
    },
    del(id) {
      this.list = this.list.filter((item, i) => {
        return item.id !== id
      })
    },

    add() {
      let id = this.list[this.list.length - 1].id + 1
      this.list.push({
        id,
        subject: this.subject,
        score: this.score,
        time: new Date()
      })
      // 清空表单
      this.subject = ''
      this.score = 0
    }
  }
};
</script>

<style scoped>
table {
  text-align: center;
}

/* 不及格显示红色 */
.not-pass {
  color: red
}
</style>
